<script setup lang="ts">
import {ref} from "vue";
import {showToast} from "vant";
import {useI18n} from "vue-i18n";
import {useRouter} from "vue-router";
import {useStore} from "vuex";
import {editPayPassword} from "@/api/userApi.ts";

const {t} = useI18n()

const router = useRouter();
const store = useStore();

const form = ref({
  oldPassword: '',
  newPassword: '',
  reNewPassword:''
})

const submit = () => {

  if (form.value.oldPassword == '') {
    showToast(t('placeholder.oldPasswordEmpty'));
    return false;
  }

  if (form.value.newPassword == '') {
    showToast(t('placeholder.newPasswordEmpty'));
    return false;
  }

  if (form.value.reNewPassword == '') {
    showToast(t('placeholder.reNewPasswordEmpty'));
    return false;
  }

  if (form.value.newPassword != form.value.reNewPassword) {
    showToast(t('placeholder.reNewPasswordError'));
    return false;
  }

  store.state.loadingState = true;
  editPayPassword({
    old_password: form.value.oldPassword,
    new_password: form.value.newPassword,
    re_new_password: form.value.reNewPassword,
  }).then(res => {
    showToast(res.msg);
    store.state.loadingState = false;
    if (res.code == 0) {
      router.push({name: 'mine'})
    }
  })
}

</script>

<template>
    <div class="editPayPassword">
      <div class="form">
        <div class="field-item">
          <label>{{ $t('editPayPassword.oldPassword') }}</label>
          <input type="password" :placeholder="$t('placeholder.oldPasswordEmpty')" v-model="form.oldPassword"/>
        </div>
        <div class="field-item">
          <label>{{ $t('editPayPassword.newPassword') }}</label>
          <input type="password" :placeholder="$t('placeholder.newPasswordEmpty')" v-model="form.newPassword"/>
        </div>
        <div class="field-item">
          <label>{{ $t('editPayPassword.reNewPassword') }}</label>
          <input type="password" :placeholder="$t('placeholder.reNewPasswordEmpty')" v-model="form.reNewPassword"/>
        </div>
      </div>

      <div class="btn" @click="submit()">
        <span>{{ $t('editPayPassword.btn') }}</span>
      </div>
    </div>
</template>

<style scoped lang="less">
@import "../../less/editPayPassword.less";
</style>